<script setup lang="ts">
import { ref, reactive,defineProps,onMounted,defineEmits } from "vue";
import { try_update_book } from "./book";
import type { FormInstance, FormRules } from "element-plus";
import { NewBook,Book } from "./book";
import { ElNotification } from "element-plus";


const props=defineProps<{
  book:Book,
}>()

const emits=defineEmits(['updated'])

const form_ref = ref<FormInstance>();

const edited_book=ref<NewBook>({
  bookName:'',
  author:'',
  publisher:'',
  totalCount:0,
  availableCount:0,
  indexNo:''
})
onMounted(() => {
  edited_book.value=Object.assign({},props.book)
})

const validate_count = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback();
  } else {
    const total = + edited_book.value.totalCount;
    if (Number.isInteger(total) == false || +value > total) {
      callback(new Error("可借数量不能大于库存数量!"));
    } else {
      callback();
    }
  }
};
const rules = reactive<FormRules>({
  bookName: [{ required: true, message: "书籍名不能为空!", trigger: "blur" }],
  // author: [{ required: true, message: "作者不能为空!" }],
  // publisher: [{ required: true, message: "出版社不能为空!" }],
  totalCount: [
    { required: true, type: "integer", min: 1, message: "需要一个正整数!" },
    // { validator: validate_positive_integer },
  ],
  availableCount: [
    { required: true, type: "integer", min: 0, message: "需要一个非负整数!" },
    { validator: validate_count },
  ],
});

const reset_form = () => {
  if (!form_ref.value) {
    return;
  }
  Object.assign(edited_book.value,props.book);
};
const submit = async () => {
  if (!form_ref.value) {
    return;
  }
  const is_ok = await form_ref.value.validate();
  if (is_ok) {
    try {
      const updated = await try_update_book(props.book.id,edited_book.value);
    // Object.assign(edited_book.value,updated);
    // Object.assign(props.book,updated)
    ElNotification.success({
      message:'更新书籍成功!',
      title:'Success',
      duration:5000
    })
    emits('updated',updated)
    } catch (error) {
      ElNotification.error({
        showClose: true,
        message: "更新书籍失败!\n" + error,
        title: "Error",
        duration:10000,
      });
    }
  }
};
</script>

<template>
  <el-form
    label-position="right"
    label-width="100px"
    style="max-width: 460px"
    ref="form_ref"
    status-icon
    :model="edited_book"
    :rules="rules"
  >
    <el-form-item label="书名" prop="bookName">
      <el-input v-model="edited_book.bookName" />
    </el-form-item>
    <el-form-item label="作者" prop="author">
      <el-input v-model="edited_book.author" />
    </el-form-item>
    <el-form-item label="出版社" prop="publisher">
      <el-input v-model="edited_book.publisher" />
    </el-form-item>
    <el-form-item label="索引号" prop="indexNo">
      <el-input v-model="edited_book.indexNo" />
    </el-form-item>
    <el-form-item label="入库数量" prop="totalCount">
      <el-input-number v-model="edited_book.totalCount" />
    </el-form-item>
    <el-form-item label="可借数量" prop="availableCount">
      <el-input-number v-model="edited_book.availableCount" />
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="reset_form()">重置</el-button>
      <el-button type="primary" @click="submit()">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
</style>
